const { toCssVal } = require("utils/index");
const { BASE_ASSETS_URL } = require("config/index");
const app = getApp();
const baseSrc = "/assets/img/local/icon.png"; //使用这个路径（已配置过路径别名）图片不会显示，暂时不清楚原因
const isDev = app.globalData.env === "dev";
// const baseUrl = "../../assets/img/temp";
// const baseUrl = isDev ? "/assets/img/temp" : BASE_ASSETS_URL + "/imgs/icon";
const baseUrl = BASE_ASSETS_URL + "/imgs/icon";
const nameMap = {
  more: baseUrl + "/more.png",
  play: baseUrl + "/play.png",
  love: baseUrl + "/love.png",
  "love-theme": baseUrl + "/love-theme.png",
  add: baseUrl + "/add.png",
  order: baseUrl + "/order.png",
  clear: baseUrl + "/clear.png",
  delete: baseUrl + "/delete.png",
  search: baseUrl + "/search.png",
  checked: baseUrl + "/checked.png",
  download: baseUrl + "/download.png",
  "arrow-up": baseUrl + "/arrow-up.png",
  "arrow-right": baseUrl + "/arrow-right.png",
  "arrow-down": baseUrl + "/arrow-down.png",
  "arrow-left": baseUrl + "/arrow-left.png",
};
Component({
  options: {
    styleIsolation: "apply-shared",
  },
  properties: {
    name: {
      type: String,
      value: "",
      validator(val) {
        return [
          "",
          "more",
          "play",
          "love",
          "love-theme",
          "add",
          "order",
          "clear",
          "delete",
          "search",
          "checked",
          "download",
          "arrow-up",
          "arrow-right",
          "arrow-down",
          "arrow-left",
        ].includes(val);
      },
    },
    mode: {
      type: String,
      value: "aspectFill",
      validator(val) {
        return [
          "scaleToFill",
          "aspectFit",
          "aspectFill",
          "widthFix",
          "heightFix",
          "center",
        ].includes(val);
      },
    },
    lazLoad: {
      type: Boolean,
      value: false,
    },
    src: {
      type: String,
      value: "",
    },
    size: {
      type: String,
      value: "1em",
    },
  },

  data: {
    baseSrc,
    style: "",
  },
  observers: {
    src(newVal) {
      this.setData({
        newSrc: newVal,
      });
    },
    name(newVal) {
      this.setData({
        newSrc: nameMap[newVal],
      });
    },
  },
  attached() {
    let { size, name } = this.data;
    size = toCssVal(size);
    this.setData({
      style: `height:${size}; width:${size};`,
      newSrc: nameMap[name],
    });
  },
  methods: {},
});
